@import "../../../../../../../../common";

:host {
    display: block;
    overflow: hidden;
    width: 100%;
    height: 100%;
}

.svg-wrapper {
    width: 100%;
    display: block;
    height: 100%;
    position: relative;
    cursor: all-scroll;

    ::ng-deep {
        .edgePath {
            path {
                stroke: $polar_grey_3;

                &.highlight {
                    stroke: black !important;
                }

                :host-context(.night) & {
                    stroke: $darkTheme_grey_5;

                    &.highlight {
                        stroke: white !important;
                    }
                }
            }

            &.color-success path {
                stroke: $cds_color_green;
            }

            &.color-fail path {
                stroke: $cds_color_red;
            }

            &.color-inactive path {
                stroke: grey;
            }

            :host-context(.night) & {
                &.color-success path {
                    stroke: $darkTheme_green;
                }

                &.color-fail path {
                    stroke: $darkTheme_red;
                }

                &.color-inactive path {
                    stroke: grey;
                }
            }
        }
    }
}

.controls {
    position: absolute;
    bottom: 20px;
    right: 20px;
    display: flex;
    flex-direction: row;

    button {
        margin-right: 15px;
    }
}
